<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>game canvas</title>
	<script src="lib.js"></script>
	<style>
		canvas {
			margin: 59px auto;
			border:1px solid red;
		}
	</style>
</head>
<body>
	<canvas id="ball" width="400" height="400"></canvas>
</body>
	<script>
	var canvas = document.getElementById('ball'),
	    context = canvas.getContext('2d'),
	    radius = 40,
	    ball = new Ball(radius),
	    currentY = canvas.height / 2,
	    range = currentY - radius,
	    speed = 0.045,
		angle = 0;

	ball.x = canvas.width/2;
	ball.y = canvas.height/2;

	(function drawFrame(){
		window.requestAnimationFrame(drawFrame,canvas);
		context.clearRect(0,0,canvas.width,canvas.height);
		ball.y = currentY + Math.sin(angle) * range;
		angle += speed;
		ball.draw(context);
	}());
	 
	</script>
</html>